<template>
	<NavBar :obj="{ title: '我的足迹', color: '#000', backgroundColor: '#fff' }" />

	<up-sticky :offset-top="offsetTop">
		<view class="top flex items-center justify-between">
			<view class="tabs">
				<up-tabs
					:list="condition"
					@click="conditionCah"
					:scrollable="false"
					:activeStyle="{
						color: '#303133',
						fontSize: '34rpx',
						fontWeight: 'bold',
						transform: 'scale(1.05)'
					}"
					:inactiveStyle="{
						fontWeight: 400,
						fontSize: '28rpx',
						color: '#666666'
					}"
					lineColor="linear-gradient(90deg, #FB3204 0%, #FE7800 100%)"
				></up-tabs>
			</view>
			<view class="clear" @click="clearFoot">清空</view>
		</view>
	</up-sticky>

	<view class="fill">
		<view class="show-load" v-if="showLoad" style="padding: 30rpx">
			<up-loading-icon text="加载中" textSize="13"></up-loading-icon>
		</view>

		<view class="empty" style="padding-bottom: 20%" v-if="!list.length && !showLoad">
			<up-empty icon="/static/product/ic_zerodata@2x.png" iconSize="392rpx" marginTop="50%" text="暂无足迹" />
		</view>
		<block v-if="type == 1">
			<view class="item" v-for="(item, index) in list" :key="index">
				<view class="date">{{ item.date }}</view>
				<view class="list">
					<up-row customStyle="margin-bottom: 10px" gutter="10" style="flex-wrap: wrap">
						<up-col span="4" v-for="(item2, index2) in item.list" :key="index2">
							<view class="record flex flex-col justify-between" @click="goUrl('/pages/product/details?id=' + item2.id)">
								<image :src="item2.icon" class="icon"></image>
								<view class="info flex-1 flex flex-col justify-between">
									<view class="title line-2-clamp flex-1">{{ item2.title }}</view>
									<view class="rmb price">{{ item2.vip_price }}</view>
								</view>
							</view>
						</up-col>
					</up-row>
				</view>
			</view>
		</block>

		<block v-else>
			<view class="item video-item" v-for="(item, index) in list" :key="index">
				<view class="date">{{ item.date }}</view>
				<view class="list">
					<up-row customStyle="margin-bottom: 10px" gutter="10" style="flex-wrap: wrap">
						<up-col span="4" v-for="(item2, index2) in item.list" :key="index2">
							<view class="record" @click="goUrl('/pages/user/video/video-info?id=' + item2.id + '&p=1')">
								<image :src="item2.video + '?vframe/jpg/offset/1'" class="icon"></image>
								<view class="info flex items-center justify-between">
									<image src="/static/video/ic_dspscangwei@2x.png" class="hit-icon"></image>
									<view class="hit">{{ item2.collects }}</view>
								</view>
								<image src="/static/product/ic_cepbofbig.png" class="dsj-icon"></image>
							</view>
						</up-col>
					</up-row>
				</view>
			</view>
		</block>

		<view class="flex-show-load flex items-center justify-between" v-if="showMoreLoad">
			<up-loading-icon text="加载中" textSize="13" class="flex-1"></up-loading-icon>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive, inject } from 'vue';
	import { port, goUrl, loading, closeLoading, hint } from '/service/port';
	import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
	const list = ref([]);
	const title = ref('');
	const type = ref(1);
	const listRef = ref({
		page: 1
	});
	const showLoad = ref(true);
	const showMoreLoad = ref(false);

	const condition = reactive([
		{ name: '商品', val: 1 },
		{ name: '视频', val: 2 }
	]);

	function conditionCah(e) {
		type.value = e.val;
		listRef.value.page = 1;
		list.value.length = 0;
		myProductFoot();
	}
	const offsetTop = ref(0);
	onShow(() => {
		// #ifdef MP-WEIXIN
		offsetTop.value = inject('minTop');
		// #endif
		listRef.value.page = 1;
		list.value.length = 0;
		myProductFoot();
	});

	onReachBottom(() => {
		showMoreLoad.value = true;
		myProductFoot();
	});

	async function clearFoot() {
		uni.showModal({
			title: '请确认',
			content: '确定要清空所有足迹吗？',
			confirmColor: '#FB3204',
			success: async function (res) {
				if (res.confirm) {
					loading();
					let res = await port('clearFoot', { type: type.value });

					setTimeout(() => {
						closeLoading();
						hint(res.msg);
						listRef.value.page = 1;
						list.value.length = 0;
						myProductFoot();
					}, 200);
				}
			}
		});
	}

	async function myProductFoot() {
		showLoad.value = true;
		let res = await port(type.value == 1 ? 'myProductFoot' : 'myVideoFoot', listRef.value);
		showLoad.value = false;
		showMoreLoad.value = false;
		if (res.data.length) {
			list.value = [...list.value, ...res.data];
			listRef.value.page++;
		}
	}
</script>

<style scoped lang="scss">
	:global(page) {
		background-color: #f4f5f8;
	}

	::v-deep .u-tabs__wrapper__nav__item {
		padding: 0 44rpx;
	}

	.flex-show-load {
		position: sticky;
		bottom: 10rpx;
		width: 100%;
	}

	.top {
		background: #ffffff;
		padding: 0 30rpx 0 0;
		.clear {
			font-weight: 400;
			font-size: 28rpx;
			color: #fb3204;
			background: #ffe3dd;
			border-radius: 24rpx;
			padding: 5rpx 25rpx;
		}
	}

	.fill {
		padding-bottom: 12rpx;

		.item {
			margin: 30rpx;
			
			.date {
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
				margin-bottom: 21rpx;
			}

			.list {
				.record {
					height: 366rpx;
					background: #ffffff;
					border-radius: 20rpx;
					margin-bottom: 20rpx;
					.icon {
						width: 100%;
						height: 222rpx;
						border-radius: 20rpx;
					}
					.info {
						padding: 13rpx;
						.title {
							font-weight: 400;
							font-size: 24rpx;
							color: #000000;
							margin-bottom: 10rpx;
						}
						.price {
							font-weight: 500;
							font-size: 32rpx;
							color: #fb3204;
						}
					}
				}
			}
		}
		.video-item {
			.record {
				height: 316rpx !important;
				position: relative;
				margin-bottom: 20rpx;
				.icon {
					width: 100% !important;
					height: 100% !important;
				}
				.info {
					position: absolute;
					bottom: 0;
					left: 0;
					.hit-icon {
						width: 26rpx;
						height: 24rpx;
					}
					.hit {
						font-weight: 400;
						font-size: 22rpx;
						color: #ffffff;
						margin-left: 10rpx;
					}
				}
				.dsj-icon {
					position: absolute;
					width: 60rpx;
					height: 60rpx;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
			}
		}
	}
</style>
